<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/jquery.placeholder.js"></script>
    <style>
        body {
            width: 100%;
            height: 100%;
            font-family: "Microsoft Yahei";
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            font-size: 12px;
            color: #666;
        }

        input {
            border: none;
            outline: none;
            font-size: 16px;

        }

        #wrap {
            position: relative;
            width: 500px;
            height: 300px;
            top: 200px;
            left: 500px;
        }

        .old {
            width: 300px;
            height: 40px;
            border-radius: 5px;
            border: 1px solid #00a1ea;
            margin-bottom: 5px;
            position: absolute;
            border-bottom: 1px solid #00a1ea;;

        }

        #oldPassword {
            width: 98%;
            height: 90%;
            padding: 2px;
            border-radius: 5px;
        }

        #oldPasswordMess {
            position: absolute;
            width: 200px;
            height: 40px;
            left: 320px;
            line-height: 40px;
            color: red;
        }

        .new {
            position: absolute;
            width: 300px;
            height: 80px;
            border-radius: 5px;
            border: 1px solid #00a1ea;
            top: 50px;
        }

        .new input {
            width: 300px;
            height: 15px;
        }

        #newPassword {
            width: 98%;
            height: 44%;
            padding: 2px;
            border-bottom: 1px dashed #999999;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        #confirmPassword {
            width: 98%;
            height: 44%;
            padding: 2px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        #newPasswordMess {
            position: absolute;
            width: 200px;
            height: 40px;
            left: 320px;
            line-height: 40px;
            top: 54px;
            color: red;
        }

        #confirmPasswordMess {
            position: absolute;
            width: 200px;
            height: 40px;
            left: 320px;
            line-height: 40px;
            top: 92px;
            color: red;
        }

        #cancel {
            position: absolute;
            width: 150px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            background-color: rgb(234, 159, 0);
            border-radius: 3px;
            left: 0;
            top: 150px;
        }

        #confirm {
            position: absolute;
            width: 145px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            background-color: #00a1ea;
            border-radius: 3px;
            left: 160px;
            top: 150px;
        }

        ::-webkit-input-placeholder { /* WebKit browsers */
            color: #999;
            font-size: 15px;
        }

        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #999;
            font-size: 15px;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #999;
            font-size: 15px;
        }

        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #999;
            font-size: 15px;
        }

        #theTop {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 30px;
        }

        .logo {
            float: left;
            margin-left: 20%;
        }

        #header {
            width: 100%;
            height: 36px;
            line-height: 36px;
            border-bottom: 1px solid #ddd;
        }

        .amend {
            margin-left: 70%;
        }

        .cacult {
            margin-left: 20px;
        }
    </style>
</head>
<body>
<div id="header">
    <a href="../index.html"><span class="amend">首页</span></a>
    <a href="login.html"><span class="cacult">登录</span></a>
</div>
<div id="theTop">
    <img class="logo" src="../img/logo.png" alt="">
</div>

<div id="wrap">
    <div class="old">
        <input type="password" id="oldPassword" placeholder="原密码">
    </div>
    <span id="oldPasswordMess"></span>

    <div class="new">
        <input type="password" id="newPassword" placeholder="新密码"></br>
        <input type="password" id="confirmPassword" placeholder="再次输入新密码">
    </div>
    <span id="newPasswordMess"></span>
    <span id="confirmPasswordMess"></span>
    <div id="confirm">确定</div>
    <a href="../index.html">
        <div id="cancel">取消</div>
    </a>
</div>

<script>
    $(function () {
        if (localStorage.token == "") {
            alert('请先登录');
            window.location.href = 'login.html'
        }
        $('.cacult').click(function () {
            localStorage.token = '';
            localStorage.userid = '';
            window.location.href = 'login.html'
        });
        $("#oldPassword").bind("blur", function () {
            var oldPassword = $("#oldPassword").val();
            if (oldPassword == "") {
                $("#oldPasswordMess").html("密码不能为空");
            }
        });
        $('input, textarea').placeholder({customClass:'my-placeholder'});
        var opasswordRe = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;

        $("#newPassword").bind("blur", function () {
            var newPassword = $("#newPassword").val();
            var confirmPassword = $("#confirmPassword").val();
            if (!opasswordRe.test(newPassword)) {
                $("#newPasswordMess").html("请输入6至22位字母或数字");
                return false
            }
            if (newPassword == "") {
                $("#newPasswordMess").html("密码不能为空");
            } else if (confirmPassword && newPassword != confirmPassword) {
                $("#newPasswordMess").html("两次输入密码不一致");
            } else if (newPassword == confirmPassword) {
                $("#newPasswordMess").html("");
            }
        });

        $("#confirmPassword").bind("blur", function () {
            var newPassword = $("#newPassword").val();
            var confirmPassword = $("#confirmPassword").val();
            if (!opasswordRe.test(confirmPassword)) {
                $("#newPasswordMess").html("请输入6至22位字母或数字");
                  return false
            }
            if (confirmPassword == "") {
                $("#confirmPasswordMess").html("密码不能为空");
            } else if (newPassword != confirmPassword) {
                $("#confirmPasswordMess").html("两次输入密码不一致");
            } else if (newPassword == confirmPassword) {
                $("#confirmPasswordMess").html("");
            }
        });

        $("#confirm").bind("click", function () {
            var confirmPassword = $("#confirmPassword").val();
            var oldPassword = $("#oldPassword").val();
            var newPassword = $("#newPassword").val();
            if (!opasswordRe.test(confirmPassword)) {
                  $("#newPasswordMess").html("请输入6至22位字母或数字");
                return 0;
            };
            if (!opasswordRe.test(newPassword)) {

                $("#newPasswordMess").html("请输入6至22位字母或数字");
                return 0;
            };
            if (oldPassword == "") {
                $("#oldPasswordMess").html("密码不能为空");
                return 0;
            };

            if (newPassword == "") {
                $("#newPasswordMess").html("密码不能为空");
                return 0;
            };

            if (confirmPassword == "") {
                $("#confirmPasswordMess").html("密码不能为空");
                return 0;
            };
            if (newPassword != confirmPassword) {
                $("#confirmPasswordMess").html("两次输入密码不一致");
                return 0;
            };
            var params = {
                "usercode": localStorage.username,
                "oldpass": oldPassword,
                "newpass": newPassword
            };
            $.post(localStorage.location+"modifypassword", params, function (data) {
                if (data.status == "error") {

                    $("#oldPasswordMess").html("密码不正确");
                } else if (data.status == "success") {
                    window.location.href = "../index.html";
                }
            });
        });


    })

</script>
</body>
</html>